<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { queryTodayTrainWordWeekData } from '@/api/statistics'
import { getOneWeekAlarmsStatics } from "@/api/statistics" 

const animationDuration = 1000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '218px'
    }
  },
  data() {
    return {
      chart: null,
      xAxisWeek: [],
      levelAlarmNumbers: {},
      typesAlarmNumbers: {},
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            // type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#fff3'
            }
          }
        },
        grid: {
          top: 35,
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            max: function(value) {
              return Math.ceil(value.max * 1.5)
            }
          }
        ],
        series: []
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.drawChart()
      this.asyncGetOneWeekAlarmsStatics()
    },
    drawChart() {
      let day = new Date().getDay()
      let weeks = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      this.xAxisWeek = []
      this.xAxisWeek.push(...weeks.slice(day))
      this.xAxisWeek.push(...weeks.slice(0, day))

      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption(this.option)
    },

    updateChart() {
      this.option.xAxis[0].data = this.xAxisWeek

      this.option.series = []
      this.option.legend.data = []

      Object.keys(this.levelAlarmNumbers).forEach(key => {
        this.option.legend.data.push(key)
        this.option.series.push({
          name: key,
          type: 'line',
          barWidth: '40%',
          data: this.levelAlarmNumbers[key],
          barGap: '0',
          animationDuration,
          lineStyle: {
            width: 2
          },
          areaStyle: {
            opacity: 0.2
          },
          showSymbol: false
        })
      })

      Object.keys(this.typesAlarmNumbers).forEach(key => {
        this.option.legend.data.push(key)
        this.option.series.push({
          name: key,
          type: 'line',
          barWidth: '40%',
          data: this.typesAlarmNumbers[key],
          barGap: '0',
          animationDuration,
          lineStyle: {
            width: 2
          },
          areaStyle: {
            opacity: 0.2
          },
          showSymbol: false
        })
      })
      
      this.chart.setOption(this.option)
    },

    async asyncGetOneWeekAlarmsStatics() {
      const res = await getOneWeekAlarmsStatics()
      if (res.code === 0) {
        let alarmTxtMap = {'1':'一级报警', '2':'二级报警', '3':'三级报警'}
        this.xAxisWeek = []
        this.levelAlarmNumbers = {}
        this.typesAlarmNumbers = {}

        // this.levelAlarmNumbers = {'一级':[12,2,4,6,7,9,23], '二级': [12,2,4,6,7,9,3], '三级': [9,2,4,6,7,9,9]}
        // this.typesAlarmNumbers = {'A':[1,12,4,6,7,9,6], 'B': [5,2,4,6,7,9,7], 'C':[7,2,4,6,7,9,8]}

        let dateAlarms = res.data.dateAlarms
        for (let i = 0; i < dateAlarms.length; i++) {
          let dateAlarm = dateAlarms[i]
          this.xAxisWeek.push(dateAlarm.date)

          let levelAlarmNumber = dateAlarm.levelAlarmNumber
          let typesAlarmNumber = dateAlarm.typesAlarmNumber

          Object.keys(levelAlarmNumber).forEach(key => {
            if (!(alarmTxtMap[key] in this.levelAlarmNumbers)) {
              this.levelAlarmNumbers[alarmTxtMap[key]] = []
            }
            this.levelAlarmNumbers[alarmTxtMap[key]].push(levelAlarmNumber[key])
          })
          Object.keys(typesAlarmNumber).forEach(key => {
            if (!(key in this.typesAlarmNumbers)) {
              this.typesAlarmNumbers[key] = []
            }
            this.typesAlarmNumbers[key].push(typesAlarmNumber[key])
          })
        }
        this.updateChart()
      }
    }
  }
}
</script>
